<template>
	<view class="content">
		<view class="statisticsC">
			<!-- 统计信息 -->
			<view class="sta-info flex-between boxS">
				<view class="info-left">
					<view class="info-time font26">
						{{nowDay}}
					</view>
					<view class="info-name">
						<text class="font30">{{userInfo.user_name}} </text>
						<text class="font26"> 023568954563</text>
					</view>
					<view class="info-group font26">
						考勤组：{{groupN.name}}
					</view>
				</view>
				<view class="info-right" hover-class="btns">
					<view class="info-btn font26" @click="urllink('summary')">
						月汇总
					</view>
				</view>
			</view>
			<!-- 日期列表 -->
			<view class="sta-calendar boxS">
				<view class="sta-swiper">
					<lxCalendar @change="change" :value="nowDays" @changeMonth="changeMonth"></lxCalendar>
				</view>
			</view>
		
			<!-- 时间列表 -->
			<view class="sta-state boxS">
				<view class="staS">
					<view class="state-text flex-left">
						<image src="../../static/img/index_ico1.png" mode="widthFix"></image>
						<text>考勤状态：{{is_rest == 0?attendance_status_text:is_rest == 1?"休息":'暂无'}}</text>
					</view>
					<view class="state-list" v-if="is_rest == 0 && dayList.length>0">
						<block v-for="(item,index) in dayList">
							<view class="state-item">
								<view class="state-line">
									<view class="state-dian"></view>
								</view>
								
								<view class="state-cont">
									<block v-if="item.is_normal==1">
										<view class="state-text1" v-if="item.type==1">
											上班时间：{{groupL.start_time?groupL.start_time:'暂无'}}
										</view>
										<view class="state-text1" v-else>
											下班时间：{{groupL.end_time?groupL.end_time:'暂无'}}
										</view>
										<!-- 有效记录 -->
										<view class="state-text2">
											<text class="state-tab font22" v-if="item.punch_status_text!=''">{{item.punch_status_text}}</text>
											<block v-if="item.apply_tag.length>0">
												<text class="state-tab font22" v-for="(tag,index)  in  item.apply_tag" :key='index'>{{tag}}</text>
											</block>
											<block v-if="!(item.punch_status ==0 || item.punch_status ==2)">
												打卡时间 {{item.punch_time?item.punch_time:'暂无'}}
											</block>
											
										</view>
									</block>
									<block v-else>
										<view class="state-text1" >
											打卡时间：{{item.punch_time?item.punch_time:'暂无'}}
										</view>
										<!-- 无效记录 -->
										<view class="state-text2 font28" v-if="item.is_normal==0" style="color: #787878;font-weight: 500;">
											打卡无效，此记录已被更新
										</view>
									</block>
									
								</view>
								<!-- 补卡申请 -->
								<block v-if="item.is_normal==1 && item.is_repair_card!=1">
									<view class="state-other font24" @click="urllink('repair',item.id)" v-if="item.punch_status==2">
										补卡申请
									</view>
								</block>
							</view>
						</block>
					</view>
				
					<!-- 休息 -->
					<view class="no-list flex-center" v-if="is_rest != 0 || (is_rest == 0 &&  dayList.length<=0)">
						<view class="no-cont">
							<image v-if="is_rest == 1" src="../../static/img/no_ico1.png" mode="widthFix"></image>
							<image v-else src="../../static/img/no_ico2.png" mode="widthFix"></image>
							<view class="no-text font30">
								{{is_rest == 1?'好好休息':is_rest == 0?'暂无考勤数据':'还没有排班'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<lzLoading :showloading='showLoading'></lzLoading>
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	import lxCalendar from '../../components/lx-calendar/lx-calendar.vue'
	export default {
		components:{
			lxCalendar,
			lzLoading
		},
		data() {
			return {
				showLoading: true,
				dayList: [], //日期列表
				
				groupL: '', //考勤组
				
				is_rest: '', //是否休假
				
				groupN: '', //
				
				attendance_status_text:'',
				
				nowDay:'',
				nowDays:'',
			}
		},
		computed:{
			userInfo(){
				return uni.getStorageSync("USERINFO")
			},
			
		},
		
		onLoad(options){
			if(options.day)
			{
				this.nowDay = this.$util.formatTime(options.day,'Y-M-D W')
				this.nowDays = this.$util.formatTime(options.day,'Y-M-D')
			}else
			{
				this.nowDay = this.$util.formatTime('now','Y-M-D W')
				this.nowDays = this.$util.formatTime('now','Y-M-D')
			}
			Promise.all([this.getMonthAttend(),this.getDayAttendance(this.nowDays)]).then((t) => {
				
			})
		},
		

		onShow() {
			
		},
		methods: {
			//页面跳转
			urllink(url,id){
				// 跳转到消息
				if(url == 'summary')
				{
					uni.navigateTo({
						url:"../statistics/summary"
					})
				}
				// 跳转到补卡申请
				if(url == 'repair')
				{
					uni.navigateTo({
						url:"../submit/supplement?id=0&name=补卡申请&day="+id
					})
				}
			},
			//获取天考勤情况
			getDayAttendance(days){
				return new Promise((resolve, reject) => {
					this.$api.getDayAttendance({
						day: days?days:this.$util.formatTime('now','Y-M-D')
					}, true, (res) => {
						let result = res.day
						if(res.day)
						{
							result.start_time = this.$util.formatTime(result.start_time,'h:m')
							result.end_time = this.$util.formatTime(result.end_time,'h:m')
						}
						this.groupL = result
						this.groupN = res.group
						this.is_rest = res.is_rest
						this.attendance_status_text = res.attendance_status;
						let dayL = res.list;
						for(let i in dayL)
						{
							dayL[i].punch_time = this.$util.formatTime(dayL[i].punch_time,'h:m')
						}
						this.dayList = dayL
						let sett = setTimeout(()=>{
							this.showLoading = false
							clearTimeout(sett)
						},500)
						
						resolve("success")
					})
				})
			},
			
			//获取每月的考勤数据
			getMonthAttend(){
				return new Promise((resolve, reject) => {
					this.$api.getMonthAttend({
						month: this.$util.formatTime('now','Y-M'),
						member_id:''
					}, true, (res) => {
						// this.dayList = res.days
						resolve("success")
					})
				})
			},
			
			//时间组件切换
			change(e){
				console.log(e)
				this.dayList = []
				this.is_rest = ''
				this.groupL = []
				this.showLoading = true
				this.getDayAttendance(e.fulldate)
				this.nowDay = this.$util.formatTime(e.fulldate,'Y-M-D W')
			},
			//组件内切换月份
			changeMonth(e){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page
	{
		.statisticsC
		{
			padding:  30rpx 4%;
			animation: fadeIn .5s;
			.sta-info
			{
				align-items: flex-start;
				background: #fff;
				border-radius: 15rpx;
				padding: 30rpx;
				.info-time
				{
					color: #ABABAB;
				}
				.info-name
				{
					font-weight: bold;
					color: #454545;
					padding: 30rpx 0 15rpx 0;
					text
					{
						&:last-child
						{
							margin-left: 15rpx;
							letter-spacing: 0;
						}
					}
				}
				.info-group
				{
					color: #008AFF;
				}
				.info-btn
				{
					color: #FFFFFF;
					padding: 15rpx 30rpx;
					border-radius: 30rpx;
					background: #008AFF;
				}
			}
			
		}
		.sta-calendar
		{
			background: #fff;
			padding: 30rpx;
			padding-top: 0;
			margin-top: 30rpx;
			border-top-left-radius: 15rpx;
			border-top-right-radius: 15rpx;
		}
		
		// 时间列表
		.sta-state
		{
			background: #fff;
			padding: 30rpx;
			border-top: 1rpx solid #F0F0F0;
			border-bottom-left-radius: 15rpx;
			border-bottom-right-radius: 15rpx;
			.staS
			{
				transition: all .3s;
				.state-text
				{
					margin-bottom: 30rpx;
					color: #008AFF;
					image
					{
						width: 36rpx;
						margin-right: 15rpx;
					}
				}
				.state-item
				{
					position: relative;
					padding-left: 50rpx;
					padding-bottom: 70rpx;
					.state-other
					{
						position: absolute;
						top: 10rpx;
						right: 0;
						padding: 10rpx 20rpx;
						border-radius: 50rpx;
						border: 1px solid #008AFF;
						color: #008AFF;
					}
					
					.state-cont
					{
						
						.state-text1
						{
							color: #787878;
							margin-bottom: 15rpx;
						}
						.state-text2
						{
							font-weight: bold;
							color: #454545;
						}
						.state-tab
						{
							font-weight: 500;
							color: #FFFFFF;
							background: #E01915;
							border-radius: 7rpx;
							padding: 5rpx 15rpx;
							margin-right: 20rpx;
						}
					}
					.state-line
					{
						position: absolute;
						top: 0;
						left: 0;
						width: 35rpx;
						height: 40rpx;
						background: #fff;
						.state-dian
						{
							
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #ABABAB;
							margin: auto;
							margin-top: 10rpx;
						}
						
					}
					&:before
					{
						position: absolute;
						content: "";
						top: 0;
						left: 15rpx;
						width: 4rpx;
						background: #ABABAB;
						height: 50%;
					}
					&:after
					{
						position: absolute;
						content: "";
						bottom: 0;
						left: 15rpx;
						width: 4rpx;
						background: #ABABAB;
						height: 50%;
					}
					&:last-child
					{
						&:before
						{
							display: none;
						}
						&:after
						{
							display: none;
						}
					}
				}
			}
		}
		.no-list{
			height: 400rpx;
			.no-cont{
				image
				{
					display: block;
					width: 120rpx;
					height: 130rpx;
					margin: auto;
				}
				.no-text{
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
